<template>
	<view class="container">
	  <view class="bg"></view>
	  <view class="top-group-swiper">
		<swiper @change="change" :indicator-dots="true" indicator-color="#55aaff" indicator-active-color="#fff" :interval="2000" :autoplay="true">
			<swiper-item v-for="(item, index) in swiperImages" :key="index">
				<image class="swiper-image" :src="item.url" mode="aspectFill"/>
			</swiper-item>
		</swiper>
	  </view>
	  <view class="down-group-selection">
	      <view class="down-group-selection-group" @click="chooseUploadFile">
	        <view class="down-group-selection-i">
	          <image src="../../static/baozi.png"></image>
	        </view>
	        <view class="down-group-selection-t1">文档打印</view>	
	        <view class="down-group-selection-t2">doc/ppt/pdf/excel</view>
	      </view>
	      <view class="down-group-selection-group" @click="chooseUploadFile">
	        <view class="down-group-selection-i">
	          <image src="../../static/baozi.png"></image>
	        </view>
	        <view class="down-group-selection-t1">照片打印</view>
	        <view class="down-group-selection-t2">png/jpg</view>
	      </view>
	  </view>
	  <view class="explain-group">
	  	<view class="ex-text">
	  		打印说明
	  	</view>
		<view class="ex-group">
			<view class="ex-groupList">
				<view class="ex-group-icon">
					<image src="../../static/one.png"></image>
				</view>
				<view class="ex-group1">
					<view class="ex-group1-text">
						上传文件
					</view>
					<view class="ex-group2-text">
						支持doc、dcx、 pdf、jpg、png等文件上传
					</view>
				</view>
			</view>
			<view class="ex-groupList">
				<view class="ex-group-icon">
					<image src="../../static/two.png"></image>
				</view>
				<view class="ex-group1">
					<view class="ex-group1-text">
						设置&支付
					</view>
					<view class="ex-group2-text">
						设置参数，设置时要细心呐
					</view>
				</view>
			</view>
			<view class="ex-groupList">
				<view class="ex-group-icon">
					<image src="../../static/three.png"></image>
				</view>
				<view class="ex-group1">
					<view class="ex-group1-text">
						打印/扫码
					</view>
					<view class="ex-group2-text">
						设置完成后自助机扫描二维码自动打印
					</view>
				</view>
			</view>
		</view>
	  </view>
	</view>

</template>

<script>
	import {getToken} from "../../apis/myCookie.js"	
	import {addOrders} from "../../apis/orders.js"
	import {listImages} from "../../apis/images.js"
	
	export default {
		data() {
			return {
				title: 'Hello',
				selectSwiper:0,
				swiperImages: [{
						colorClass: 'uni-bg-red',
						url: 'https://tse1-mm.cn.bing.net/th/id/R-C.4d9cd2e53dddfc238a06e750b73cd023?rik=MsMCKPGumufOyQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fc2accfe637f86fb6f11949cb8651a09b.jpg&ehk=ia2TVXcow6ygWUVZ1yod5xH4aGd8565SYn6CRpxkNoo%3d&risl=&pid=ImgRaw&r=0',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/094a9dc0-50c0-11eb-b680-7980c8a877b8.jpg',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://tse1-mm.cn.bing.net/th/id/R-C.901f8ebdab22d065baefeae6c2701cc0?rik=Z3Hew18zFaF%2bLQ&riu=http%3a%2f%2fwww.pp3.cn%2fuploads%2f20120418lw%2f13.jpg&ehk=Es5ZGH90h%2foCghvlIwdKfUiqpO05gLSgOEBU2i0Mwok%3d&risl=&pid=ImgRaw&r=0',
						content: '内容 C'
					}
				],	
				systemInfo:{},
			}
		},
		onLoad() {
			
		},
		mounted() {
			this.getSystemInfo(this);
		},
		methods: {
			getSystemInfo:function(e){
				uni.getSystemInfo({
					success(res) {
						e.systemInfo = res;
					}
				})
			},
			change(e){
				this.selectSwiper = e.detail.current;
				// console.log(this.selectSwiper);
			},
			// 文件上传
			async chooseUploadFile(){
				// console.log("i comming");
				let that = this;
				wx.chooseMessageFile({
					count:1,
					type:"file",
					success: async res =>{
						// tempFilePath可以作为img标签的src属性显示图片
						console.log(res);
						const tempFilePaths = res.tempFiles;
						let tempFile = tempFilePaths[0];
						// that.uploadFile(tempFile.name,tempFile.path)
						let [err, {data}] = await uni.uploadFile({
						    url: 'http://localhost:8080/common/upload',
						    filePath:tempFile.path,
						    name: 'file',
						    header: {
						        'Authorization': 'Bearer ' + getToken(),
						        "Content-Type": "multipart/form-data",
						    }
						});
						data = JSON.parse(data);
						console.log(data.fileName); //后端存储需要的东西
						uni.showModal({
							title: '提示',
							content: '是否前往预览打印？',
							success:(res) => {
								uni.navigateTo({
									url:"../Previewsettings/Previewsettings"
								})
							}
						}),
						console.log(getApp().globalData.myOrder);
						// console.log(123)
						getApp().globalData.myOrder.requireList.push({
								fileId: data.fileName,
								paperColor: 0,
								paperNum: 1,
								paperType: 0,
								rangeEnd: 1,
								rangeStart: 1,
								side: 0,
								id: '',
								orderId: ''
							}
						);
					},
				})
			},
		}
		
	}
</script>

<style>
	.container{
	  padding: 0%;
	}
	.top-group-swiper{
		height: 400rpx;
		width: 750rpx;
	}
	.group-swiper{
	  width: 100%;
	  height: 400rpx;
	}
     .swiper-blcok{
	  height: 400rpx;
	  width: 100%;
	}
	
	.swpier-item{
	  width: 100%;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 0rpx;
	}
	.swiper-image{
	  height: 100%;
	  width: 750rpx;
	}

	.down-group-selection{
	  width: 100%;
	  height: 300rpx;
	  display: flex;
	  justify-content: space-evenly;
	  flex-direction: row;
	  margin-top: 100rpx;
	}
	.down-group-selection-group{
	  width: 300rpx;
	  height: 300rpx;
	  background-image: linear-gradient(125deg,#00aaff,#2fcfff,#1c95ff,#2fcfff,#00aaff);  background-size: 400% 400%;
	  display: flex;
	  align-items: center;
	  justify-content: space-evenly;
	  flex-direction: column;
	  border-radius: 25px;
	}
	.down-group-selection-i{
	  height: 100rpx;
	  width: 100rpx;
	}
	.down-group-selection-i image{
	  height: 100rpx;
	  width: 100rpx;
	}
	.down-group-selection-t1{
	  font-size: 36rpx;
	  color: #fff;
	  font-weight: bold;
	}
	.down-group-selection-t2{
	  font-size: 24rpx;
	  color: #fff;
		
	}
	.bg {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
		background-color: #f8f8f8;
	}
	.explain-group{
		width: 100%;
		height: 240px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-top: 20rpx;
	}
	.ex-text{
		text-align: left;
		font-size: 18px;
		margin-top: 5px;
		margin-bottom: 5px;
		padding-left: 20px;
	}
	.ex-group{
		width: 320px;
		background-color: #FFFFFF;
		border-radius: 25px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;	
		margin-top: 8px;
		margin-left: 40rpx;
	}
	.ex-groupList{
		display: flex;
		justify-content: flex-start;
		flex-direction: row;
		height: 60px;
		width: 350px;
	}
	.ex-group-icon{
		margin-left: 30px;
		margin-top: 10px;
		margin-bottom: 10pxs;
		height: 40px;
		width: 40px;
	}
	.ex-group-icon image{
		height: 40px;
		width: 40px;
	}
	.ex-group1{
		height: 40px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 10px;
	}
	.ex-group1-text{
		height: 20px;
		font-size: 15px;
	}
	.ex-group2-text{
		font-size: 10px;
		color: #d2d1cd;
	}

</style>
